<template>
    <el-dialog :title="title" :visible="true" @close="$emit('close')" width="800px">
        <el-form :model="form" v-loading="loading" ref="form" :rules="rules"  label-width="80px">
            <el-form-item label="名称" prop="name">
                <el-input v-model.trim="form.name"></el-input>
            </el-form-item>

            <el-form-item label="权限">
                <div v-for="item in operations">
                    <el-row>
                        <el-col style="width: 160px"><el-checkbox style="font-weight: bold"  @change="checkAll($event, item.name)">{{item.name}}</el-checkbox></el-col>
                        <el-col :span="16">
                            <el-checkbox-group v-model="form.operation_ids">
                                <el-checkbox :label="item1.id" name="operations" v-for="item1 in item.children">{{item1.name}}</el-checkbox>
                            </el-checkbox-group>
                        </el-col>
                    </el-row>
                </div>
            </el-form-item>
        </el-form>
        <template slot="footer" class="dialog-footer">
            <el-button @click="$emit('close')">取消</el-button>
            <el-button :loading="submitting" type="primary" @click="submit">提交</el-button>
        </template>
    </el-dialog>

</template>

<script>
    import axios from 'axios'

    export default {
        props: ['id'],
        data() {
            return {
                loading: false,
                submitting: false,
                operations: [],
                title: this.id ? '编辑用户组' : '添加用户组',
                form: {
                    name: null,
                    operation_ids: []
                },
                rules: {
                    name: [{required: true, message: '不能为空', trigger: 'blur'}]
                }
            }
        },
        async created() {
            this.loading = true;

            const promise = axios.get('/sys/operation');

            if (this.id) {
                const group = await axios.get('/sys/group/' + this.id);
                this.form.name = group.name;
                this.form.operation_ids = group.operation_ids;
            }
            this.operations = await promise;
            this.loading = false;
        },
        methods: {
            submit() {
                this.$refs['form'].validate(async valid => {
                    if (!valid) return;
                    this.submitting = true;
                    try {
                        if (this.id) {
                            await axios.put('/sys/group/' + this.id, this.form);
                        } else {
                            await axios.post('/sys/group', this.form);
                        }
                        this.$emit('reload');
                        this.$emit('close');
                        this.$message.success('操作成功');
                    } catch (e) {

                    }
                    this.submitting = false;
                })
            },
            checkAll(checked, group) {
                for (const item of this.operations) {
                    if (item.name === group) {
                        for (const elem of item['children']) {
                            const idx = this.form.operation_ids.indexOf(elem.id);
                            if (idx === -1) {
                                checked && this.form.operation_ids.push(elem.id)
                            } else {
                                checked || (this.form.operation_ids.splice(idx, 1))
                            }
                        }
                        return;
                    }
                }
            }
        }
    }
</script>